<template>
	<view class='ws-page' id='ws-page' :style='"background:"+userSet.color' @longtap="setbookStyle">
		<view class="nightModel" :style='"opacity:"+userSet.mark/100'>
		</view>
		<view class="ws-book-head" :class='{"showSet":showStyleView}'>
			{{contentInfo.cname}}
		</view>
		<view class="ws-book-list" v-for='book in contentList' :key='book.cid'>
			<view class="ws-catalog-title">
				{{book.cname}}
			</view>
			<view class="ws-catalog-content" :style='"font-size:"+userSet.fontSize+"rpx"'>
				<text>{{book.content}}</text>
			</view>
		</view>
		<view class="loaddata" v-if='loadflag'>
			加载中...
		</view>
		<view class="loaddata" v-if='moredata'>
			暂无无更多数据
		</view>
		<view class="ws-book-set" :class='{"showSet":showStyleView}'>
			<view class="ws-book-catalog" v-show='showCatalog'>
				<view class="ws-book-catalog-btn">
					<view class="ws-book-catalog-item" @click='watchCataLogPrev'>
						上一章
					</view>
					<view class="ws-book-catalog-item" @click='watchCataLogNext'>
						下一章
					</view>
				</view>
			</view>
			<view class="ws-book-style" v-show='showStyle'>
				<view class="ws-book-color">
					<text class='ws-style-label'>背景色:</text>
					<view class="radio-group">
						<view class='radio' v-for="(item, index) in colorList" :key="item" :class="{'selected':item == userSet.color}"
						 :style="'background:'+item" @click="radioChangeColor(item)"></view>
					</view>
				</view>
				<view class="ws-book-font-size">
					<text class='ws-style-label'>字号:</text>
					<view class="ws-style-content">
						<slider :value="userSet.fontSize" activeColor="#409EFF" block-size="20" @change="sliderChange" step="2" min="28" max="48" />
					</view>
				</view>
				<view class="ws-book-font-size">
					<text class='ws-style-label'>亮度:</text>
					<view class="ws-style-content">
						<slider :value="userSet.mark" activeColor="#409EFF" block-size="20" @change="slidermarkChange"  min="0" max="60" />
					</view>
				</view>
			</view>
			<view class="ws-set-type">
				<view class="set-item" @click='watchCataLogEvent'>
					<uni-icons type="list" color='#fff' size="24" />
					<text class='set-item-text'>目录</text>
				</view>
				<view class="set-item" :class='{"active":showtype=="catalog"}' @click='showCatalogBtn'>
					<uni-icons type="flag" color='#fff' size="24" />
					<text class='set-item-text'>章节</text>
				</view>
				<view class="set-item" :class='{"active":showtype=="style"}' @click='showSetStyle'>
					<uni-icons type="gear" color='#fff' size="24" />
					<text class='set-item-text'>设置</text>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		async onLoad(option) {
			this.bookId = option.bookid
			this.catalogId = option.catalogId
			this.getbookContent()
			uni.setNavigationBarTitle({
				title: this.contentInfo.name
			})
			let userSet = uni.getStorageSync('userSet')
			if(userSet){
				this.userSet = userSet
			}else{
				this.userSet={
					fontSize:28,
					color:'#ffebc5',
					mark:0,
				}
			}
		},
		mounted() {

		},
		data() {
			return {
				bookId: null,
				catalogId: null,
				contentInfo: '',
				contentList: [],
				loadflag: false,
				moredata: false,
				isNight: false,
				showStyleView: false,
				showCatalog: false,
				showStyle: false,
				showtype: null,
				colorList:['#ffebc5','#e7fcf6','#e3effc'],
				userSet:{
					fontSize:28,
					color:'#ffebc5',
					mark:0,
				}
			};
		},
		methods: {
			watchCataLogEvent() {
				uni.redirectTo({
					url: `/pages/books/catalog/catalog?bookid=${this.bookId}`
				});
			},
			watchCataLogPrev() {
				uni.redirectTo({
					url: `/pages/books/bookcontent/bookcontent?bookid=${this.bookId}&catalogId=${this.contentInfo.pid}`
				})
			},
			watchCataLogNext() {
				uni.redirectTo({
					url: `/pages/books/bookcontent/bookcontent?bookid=${this.bookId}&catalogId=${this.contentInfo.nid}`
				})
			},
			setbookStyle() {
				this.showStyleView = !this.showStyleView;
				this.showCatalog=false
				this.showStyle=false
			},
			radioChangeColor(color) {
				this.userSet.color = color
				this.$set(this.userSet,'color',color)
				console.log(this.userSet.color)
			},
			async getbookContent(next = 1) {
				if (next === 0 && this.contentInfo.pid === -1) {
					return false
				}
				if (next === 1 && this.contentInfo.nid === -1) {
					return false
				}
				this.loadflag = true
				this.moredata = false
				const data = await this.$https({
					url: `book/${this.bookId}/${this.catalogId}`
				})
				if (data && data.code === 200) {
					this.contentInfo = data.data
					console.log(this.contentInfo, 123456)
					if (next === 1) {
						this.contentList.push(this.contentInfo)
					} else if (next === 0) {
						this.contentList.unshift(this.contentInfo)
						this.contentList.pop()
					}
					this.loadflag = false
				} else {
					this.moredata = true
					this.loadflag = false
				}
			},

			showCatalogBtn() {
				this.showStyle = false
				this.showCatalog = !this.showCatalog
				this.showtype = 'catalog'
			},
			showSetStyle() {
				this.showCatalog = false
				this.showStyle = !this.showStyle
				this.showtype = 'style'
			},
			sliderChange(e){
				this.userSet.fontSize= e.detail.value
			},
			slidermarkChange(e){
				this.userSet.mark= e.detail.value
			}
		},

		onReachBottom() {
			this.catalogId = this.contentInfo.nid
			this.getbookContent(1)
		},
		onPullDownRefresh() {
			this.catalogId = this.contentInfo.pid
			this.getbookContent(0)
			uni.stopPullDownRefresh();
		},
		onUnload() {
			uni.setStorageSync('userSet', this.userSet)
			uni.setStorageSync(this.bookId, {
				catalogId: this.contentInfo.cid
			});

		}
	}
</script>

<style lang="scss">
	.ws-page {
		padding: 30rpx;
		min-height: 100%;

		.nightModel {
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background: #000;
			opacity: 0;
		}

		.ws-book-list {
			font-size: 40rpx;
			margin-bottom: 40rpx;
			line-height: 80rpx;

			.ws-catalog-h1 {
				text-align: center;
				font-size: 50rpx;
			}

			.ws-catalog-title {
				text-align: center;
			}

			.ws-catalog-content {
				font-size: 32rpx;
				line-height: 72rpx;
			}
		}

		.ws-book-head {
			background: #000;
			padding: 20rpx;
			font-size: 32rpx;
			color: #fff;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			transform: translateY(-100%);
			text-align: center;

			&.showSet {
				transform: translateY(0);
			}
		}

		.ws-book-set {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background: #000;
			padding: 0 20rpx;
			transform: translateY(100%);
			transition: opacity .15s, transform .15s, visibility .15s;

			&.showSet {
				transform: translateY(0);
			}
			.ws-set-type {
				width: 100%;
				height: 120rpx;
				display: flex;
				padding: 20rpx;
				justify-content: space-around;

				.set-item {
					color: #fff;
					text-align: center;
					opacity: 0.6;
					&.active{
						opacity: 1;
					}
					.uni-icon {
						display: block;
					}

					.set-item-text {
						margin-top: 20rpx;
						font-size: 28rpx;
					}
				}
			}

			.ws-book-catalog {
				transition: opacity .15s, transform .15s, visibility .15s;
				border-bottom: 2rpx solid rgba(255, 255, 255, .6);
				padding: 20rpx 30rpx;

				.ws-book-catalog-name {
					text-align: center;
					color: #fff;
					font-size: 32rpx;
					line-height: 60rpx;
				}

				.ws-book-catalog-btn {
					width: 100%;
					display: flex;
					color: #fff;
					font-size: 32rpx;
					line-height: 60rpx;
					justify-content: space-between;

					.ws-book-catalog-item {
						width: 200rpx;
						border: 1px solid #fff;
						border-radius: 4rpx;
						text-align: center;
					}
				}

			}

			.ws-book-style {
				transition: opacity .15s, transform .15s, visibility .15s;
				border-bottom: 2rpx solid rgba(255, 255, 255, .6);
				padding-bottom:20rpx;
				.ws-book-color {
					display: flex;
					margin-top: 20rpx;
					color: #fff;
					.ws-style-label {
						display: block;
						width: 120rpx;
						font-size: 32rpx;
						line-height: 58rpx;
					}

					.radio-group {
						display: flex;

						.radio {
							width: 60rpx;
							height: 60rpx;
							margin-right: 20rpx;
							border-radius: 50%;
							text-align: center;

							&.selected::after {
								font: normal normal normal 14px/1 uni;
								content: "\EA08";
								color: #fff;
								font-size: 36rpx;

								line-height: 60rpx;
							}
						}
					}
				}

				.ws-book-font-size {
					display: flex;
					margin-top: 20rpx;
					color: #fff;

					.ws-style-label {
						display: block;
						width: 120rpx;
						font-size: 32rpx;
						line-height: 58rpx;
					}

					.ws-style-content {
						flex: 1;
					}
				}
			}

		}

		.loaddata {
			width: 100%;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			color: #999;
		}

		.ws-night {
			position: fixed;
			right: 30rpx;
			bottom: 400rpx;

			.ws-night-img {
				width: 80rpx;
				height: 80rpx;
			}
		}


	}
</style>
